<template>
  <div>
      <div class='classHform_box'>
            <!-- <el-select v-model="value" placeholder="请选择年级" style='margin-left:10px;margin-bottom:7px;'>
                <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择科目" style='margin-left:10px;margin-bottom:7px;'>
                <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择课程类别" style='margin-left:10px;margin-bottom:7px;'>
                <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入课程名称" style='margin-left:10px;margin-bottom:7px;width:200px;'></el-input>
            <el-button type="primary" style='margin-left:10px;margin-bottom:7px;'><i class="el-icon-search el-icon--left" ></i>搜索</el-button> -->
       </div>
       <el-table  :data="tableData"   style="width: 100%">
            <el-table-column prop="arrangeName" label="培训类别"></el-table-column>
            <el-table-column prop="classObject" label="培训对象">
              <!-- <template scope="scope">
                  <span v-if="scope.row.classObject==1">个人</span>
                  <span v-else>班级</span>
              </template> -->
            </el-table-column>
            <el-table-column prop="subjectStr" label="科目"></el-table-column>
            <el-table-column prop="gradeStr" label="年级"></el-table-column>
            <el-table-column prop="classHour" label="培训课时"></el-table-column>
            <el-table-column prop="surplusHour" label="剩余课时"></el-table-column>
       </el-table>

       <el-pagination
        style="margin-top: 10px;float:right;"
        @current-change="handleCurrentChange"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>


  </div>
</template>
 <script>
    export default {
      data() {
        return {
          tableData: [],
          total: 0,
        }
      },
      methods: {
        getlist(pageNo = 1) {
          this.axios({
                method: 'post',
                url: this.url + 'web/student/StudentTrainArrangeTarget/arrangeTargetListByStudent',
                data: {pageNo: pageNo, pageSize: 10},
                headers: { 'token': this.TOKEN }
            }).then(res => {
                console.log(res)
                if(res.data.code == 200) {
                    res.data.data.result.forEach(v => {
                      v.gradeStr = Object.values(v.gradeMap).join(',');
                      v.subjectStr = Object.values(v.subjectMap).join(',');
                        
                    })
                    this.tableData = res.data.data.result;
                    this.total = res.data.data.totalCount;
                } 
            })
        },
        handleCurrentChange(val) {
          this.getlist(val)
        }
      },
      mounted () {
        this.getlist()
      }
    }
  </script>
<style>
.classHform_box{margin-bottom: 15px;background: rgb(170, 130, 130);border-radius: 5px;margin-top: 10px;padding:10px 10px 3px 10px}
</style>

